<template>
	<view>
		<view class="u-demo-wrap">
			<view class="u-demo-area  u-flex u-row-center orgimg">
				<div ref="test" class="test">
					<img :src="src" alt="">
				</div>
				<!-- <image mode="aspectFit" :shape="shape" :width="width" :height="height" @load="loadImage" :src="src"></image> -->
				<!-- <u-image mode="aspectFill" :shape="shape" :width="width" :height="height" @load="loadImage" :src="src" style="top: 50%;" ></u-image> -->
			</view>
			<view class="u-bottom">
				<u-icon name="arrow-left" size="80" color="#1296db" class=" u-flex u-row-center" style="width: 33%; text-align: center;" @click="left()"></u-icon>
				<u-icon :name="name" size="80" color="#1296db" class=" u-flex u-row-center" style="width: 33%; text-align: center;" @click="fun()"></u-icon>
				<u-icon name="arrow-right" size="80" color="#1296db" class=" u-flex u-row-center" style="width: 33%; text-align: center;" @click="play()"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {zoomElement} from '@/common/utils/zoom.js';
	import operate from '@/common/api/operate.js'
	import {getWeaterInfo} from '@/pages/weather/api/api.js'
	export default {
		data() {
			return {
				shape: 'square',
				list:[],
				src: '',//https://cdn.uviewui.com/uview/swiper/1.jpg
				width: '100%',
				height: 'auto',
				n:0,
				otimer:null,
				name:"play-circle"
			}
		},
		onLoad(options) {
			
		},
		mounted(){
			//获取需要缩放的dom元素
			let zoomEl = this.$refs.test;
			zoomElement(zoomEl)
			this.search();
			//页面关闭及返回
			this.$once('hook:beforeDestroy', () => {
				clearInterval(this.otimer);//停止
			});
		},
		methods: {
			fun:function(){
				if(this.name == "play-circle"){
					this.name = "pause-circle";
					//开始时，先调用播放
					this.play();
					//定时调用
					this.otimer = setInterval(this.play,1500)
				}else{
					this.name = "play-circle";
					this.stop();
				}
			},
            play:function(){
                this.n--;
                if(this.n < 0 ){
                    this.n = this.list.length - 1;
                }
				this.loadImage();
				// var item = this.list[this.n];
				// var imgs = operate.reqWeatherPath + "/"+this.formatTime.convertToDate(item.TBA_GETDATE).Format('YYYYMMDD')+"/"+item.TBA_FILENAME;
				// this.src = imgs;
            },
            stop:function(){
				//停止播放
                clearInterval(this.otimer);
            },
            left:function(){
                this.n++;
                if(this.n > this.list.length - 1 ){
                    this.n = 0;
                }
				this.loadImage();
            },
			loadImage(){
				var item = this.list[this.n];
				var imgs = operate.reqWeatherPath + "/"+this.formatTime.convertToDate(item.TBA_GETDATE).Format('YYYYMMDD')+"/"+item.TBA_FILENAME;
				this.src = imgs;
			},
			search() {
				var data = {
					STIME: new Date(new Date().addDate("h",-8)).Format("YYYY-MM-DD hh:mm:ss"),
					ETIME: new Date(new Date().addDate("h",0)).Format("YYYY-MM-DD hh:mm:ss"),
					TBA_INFOTYPE: "风云二号"
				}
				var _param = {}
				_param.serviceCode = "WATER_TBA_WEACONTENTNEWSel";
				_param.data = data;
				getWeaterInfo(_param).then(res =>{
					// var item = res.data[0];
					// var imgs = operate.reqWeatherPath + "/" + this.formatTime.convertToDate(item.TBA_GETDATE).Format('YYYYMMDD') + "/" + item.TBA_FILENAME;
					// this.src = imgs;
					this.list = res.data;
					this.n = 0;
					this.loadImage();
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.orgimg {
		 width: 100%;
		 height: auto;
	}
	.test{
		transform-origin: 0 0;
	}
	
	.test img{
		width: 100%;
		height: 100%;
		margin-top: 40%
	}
	.u-bottom{
		text-align: center;
		left: 0;
		right: 0;
		position: fixed;
		bottom: 15rpx;
		font-weight: 400;
		color: cornflowerblue;
	}
</style>
